<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('批次详情')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: jq-viewer-css" />
    <style>
        #imageBox img {width:100%;display:none}
        .viewer-fullscreen{display: none;}
    </style>
</head>
<body class="gray-bg">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#sdiImage-tab" aria-expanded="true"> 影像信息</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#sdiPaeaArc-tab" aria-expanded="false">基本信息</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="sdiImage-tab" class="tab-pane active">
                        <div class="box-body">
                            <div class="imageBox" id="imageBox" style="height:0px;padding-bottom:41%;">
                            </div>
                        </div>
                    </div>
                    <div id="sdiPaeaArc-tab" class="tab-pane">
                        <div class="panel-body">
                            <div class="row show-grid">
                                <div class="col-md-6">批次编号：[[${sdiPaeaArc.code}]]</div>
                                <div class="col-md-6">交易机构：[[${sdiPaeaArc.orgCode}]]</div>
                                <div class="col-md-6">交易柜员：[[${sdiPaeaArc.tellerCode}]]</div>
                                <div class="col-md-6">交易日期：[[${#dates.format(sdiPaeaArc.trDate,'yyyy-MM-dd')}]]</div>
                                <div class="col-md-6">凭证张数：[[${sdiPaeaArc.imageNum}]]</div>
                                <div class="col-md-6">状态：[[${sdiPaeaArc.status} + '-' + ${@dict.getLabel('sdi_paea_arc_status',sdiPaeaArc.status)}]]</div>
                                <div class="col-md-6">扫描员：[[${sdiPaeaArc.capturer}]]</div>
                                <div class="col-md-6">扫描时间：[[${#dates.format(sdiPaeaArc.captureTime,'yyyy-MM-dd')}]]</div>
                                <div class="col-md-6">补录员：[[${sdiPaeaArc.inputer}]]</div>
                                <div class="col-md-6">补录时间：[[${#dates.format(sdiPaeaArc.inputTime,'yyyy-MM-dd')}]]</div>
                                <div class="col-md-6">强制补录员：[[${sdiPaeaArc.forceInputer}]]</div>
                                <div class="col-md-6">强制补录时间：[[${#dates.format(sdiPaeaArc.forceInputTime,'yyyy-MM-dd')}]]</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: jq-viewer-js" />
<script th:inline="javascript">
    // $("#content-main",parent.document).toggleClass('max');
    // $("#ax_close_max",parent.document).show();
    var prefix = ctx + "sdi/sdiPaeaArc";
    var sdiImageList = [[${sdiImageList}]];
    var imgPathPrefix = [[${imgPathPrefix}]];
    var previewImageNum = 4;
    var preIndex = 0;
    $.each(sdiImageList, function(index, sdiImage) {
        if(preIndex >= previewImageNum) {
            return;
        }
        var imageUrl = imgPathPrefix +sdiImage.sdifilepath;
        $('#imageBox').append('<img name= "img'+index+'" src="'+imageUrl+'" alt="影像">');
        preIndex++;
    });
    $('#imageBox').viewer({
        inline:true,
        viewed: function () {
            $.each($('.viewer-canvas img'),function(i , img){
                // var url = $(this).attr("src");
                // var imageId = getParam(url, "imageId");
            });
        }
    }).viewer('update');
</script>
</body>
</html>